<template>
	<!-- 三点操作 -->
	<cover-view :class="dotOperShow?'dotOper':'dotOper hiddenOper'" @click.stop="cancelOper" v-if="dotOperShow">
		<cover-view class="operMain">
			<cover-view class="dotTxt" v-for="(item,index) in operList" :key="index" @click.stop="chooseDotOper(item)">{{item.title}}</cover-view>
			<cover-view class="cancel dotTxt" @click.stop="cancelOper">取消</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		name:"uni-dotoper",
		props:{
			operList:{
				type:Array,
				default(){
					return [
						// {title:"不喜欢",dId:1},
						// {title:'举报',dId:2},
						{title:'删除',id:3},
						]
				}
			},
			chooseOperItem:{
				type:[Object,String],
				default(){
					return {}
				}
			},
			dotOperShow:{
				type:Boolean,
				default:false
			}
		},
		watch: {
			chooseOperItem: {
				handler:function (val, olVal) {
				  console.log('我变化了', val, olVal)
				  this.operDot(val)
				},
				deep: true,
				// immediate: true
			}
		},
		methods:{
			// 选择的操作
			chooseDotOper(item){
				this.$emit('chooseDotOper',item)
			},
			// 取消
			cancelOper(item){
				this.$emit('cancelOper')
			},
			// 操作
			operDot(val){
				// 1表示不喜欢，2表示举报，3表示删除
				switch (val.oper.dId){
					case 1:
						this.dontLikeApi(val.oper.dId,val.post)
						break;
					case 2:
						this.informApi(val.oper.dId,val.post)
						break;
					case 3:
						this.delApi(val.oper.dId,val.post)
						break;
					default:
						break;
				}
			},
			dontLikeApi(id,post){
				uni.showToast({
					icon:'none',
					title:'不喜欢'
				})
			},
			informApi(id,post){
				uni.showToast({
					icon:'none',
					title:'举报'
				})
			},
			delApi(id,post){
				uni.showToast({
					icon:'none',
					title:'删除'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.dotOper{
	position: fixed;
	bottom: 0;
	left:0;
	background: rgba(0, 0, 0, .4);
	width: 100%;
	height:100%;
	z-index: 20;
	.operMain{
		background: #fff;
		position: absolute;
		bottom: -30rpx;//0;
		left:0;
		width: 100%;
		// padding:20rpx 0 0;
		padding: 0 0 30rpx;
		border-radius: 30rpx;//30rpx 30rpx 0 0;
		text-align: center;
		// &>view{
		// 	padding: 30rpx 0;
		// 	border-bottom: #f1f1f1;
		// }
		.dotTxt{
			height:120rpx;
			line-height:120rpx;
			// padding: 30rpx 0;
			// border-bottom: #f1f1f1;
			// color: #333;
		}
		.cancel{
			// border-top:15rpx solid #f5f5f5;
			background:#f5f5f5;
		}
	}
}
.hiddenOper{
	display: none !important;
	opacity: 0 !important;
	visibility: hidden;
}
</style>